<template>
  <div>
   <el-row :gutter="20">
      <el-col :span="18">
        <slot name="lfix" />
      </el-col>
      <el-col :span="6">
        <slot name="rfix" />
        <div style="padding-right: 10px">
           {{ expand ? "收起11111" : "展开" }}
           <span
               :class="{

            'epm-iconFont': true,
            'icon-shaixuantiaojianshouqizhuangtai': !expand,
            'icon-shaixuantiaojianzhankai': expand,
          }"
           ></span>
         </div>
      </el-col>
    </el-row>
    <el-row>
      <slot name="free"></slot>
    </el-row>
  </div>
<!--  <div :style="{ 'margin-bottom': outerMgBottom }" style="background: #fff">
    <div
      class="collapse-box"
      @click="expandHandler"
      :style="{
        height: height + 'px',
        'margin-top': mgt + 'px',
        'margin-bottom': mgb + 'px',
      }"
    >
      <div class="collapse-title">{{ label }}</div>
      <div class="expand-txt" v-if="expandTxt">
        {{ expand ? "收起" : "展开" }}
        <span
          :class="{
            'epm-iconFont': true,
            'icon-shaixuantiaojianshouqizhuangtai': !expand,
            'icon-shaixuantiaojianzhankai': expand,
          }"
        ></span>
      </div>
    </div>
    <div v-show="expand">
      <slot></slot>
    </div>
  </div>-->
</template>

<script>
export default {
  name: "Collapse",
  components: {},
  props: {
    label: "",
    mgt: {
      type: Number | String,
      default: 10,
    },
    mgb: {
      type: Number | String,
      default: 0,
    },
    height: {
      type: Number | String,
      default: 60,
    },
    outerMgBottom: {
      type: Number | String,
      default: 0,
    },
    expandTxt: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否默认展开
     */
    emphasize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      expand: true,
    }
  },
  mounted() {},
  watch: {
    emphasize: {
      handler(newV, oldV) {
        this.expand = newV
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    expandHandler() {
      if (this.expandTxt) {
        this.expand = !this.expand
      }
    },
  },
}
</script>

<style scoped>
.collapse-box {
  background: #ffffff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collapse-title {
  padding-left: 10px;
  font-weight: bold;
  color: #333333;
  font-size: 18px;
}

.expand-txt {
  color: #606266;
  font-size: 14px;
}
</style>
